<template>
  <div class="app-container">
    <div class="card-box">
      <el-table
        v-loading="examineStore.loading.list || examineStore.loading.update"
        :data="examineStore.list"
        row-id="id"
      >
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="agent.name" />
        <el-table-column label="类型">
          <template #default="{ row }">
            {{ row.client_type == "supplier" ? "供应商" : "商户" }}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="创建时间" prop="created_at" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="handleOpenExamineDialog(row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="visible" :rules="rules" title="审核">
        <el-form ref="formRef" :model="form" label-width="6em">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio value="pass">通过</el-radio>
              <el-radio value="reject">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核原因" prop="approve_reason">
            <el-input
              v-model="form.approve_reason"
              type="textarea"
              :rows="5"
              resize="none"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </template>
      </el-dialog>
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.size"
        style="margin-top: 10px"
        background
        :total="examineStore.totalCount"
        @change="examineStore.fetchList(params)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { type ExamineListQuery, type ExamineItemType, ExamineForm } from "@/api/agent/examine";
import { useExamineStoreHook } from "@/store/modules/agent/examine";
import { Message } from "@element-plus/icons-vue/dist/types";

const examineStore = useExamineStoreHook();

const params = reactive<ExamineListQuery>({
  page: 1,
  size: 10,
});

const form = reactive<ExamineForm>({
  id: 0,
  status: "pass",
  approve_reason: "",
});

const formRef = ref();

const visible = ref(false);

const rules = {
  approve_reason: [{ required: true, message: "请输入审核原因", trigger: "blur" }],
};

function handleOpenExamineDialog(row: ExamineItemType) {
  form.id = row.id;
  form.status = "pass";
  form.approve_reason = "";
  visible.value = true;
}

function handleConfirm() {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) {
      return;
    }
    try {
      await examineStore.fetchExamine(form);
      visible.value = false;
      examineStore.fetchList(params);
      ElMessage.success("审核成功");
    } catch (error) {
      ElMessage.error("审核失败");
    }
  });
}

onMounted(() => {
  examineStore.fetchList(params);
});
</script>

<style scoped lang="scss">
.qrcode-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style>
